<template>
	<view class="root f1 oh">
		<label class="bgc-f0f0f0 br-36" :style="{ padding: `0 36rpx`, margin: `46rpx 40rpx` }">
			<uni-icons type="search" color="#ccc" :size="18" />
			<input
				class="height-74 input f1 fs-28 ml-14"
				type="text"
				:focus="true"
				v-model="keywords"
				@confirm="search"
				placeholder-class="color-ccc"
				placeholder="输入要查找的关键词"
			/>
		</label>

		<scroll-view scroll-y class="f1 oh" @scrolltolower="getData">
			<block v-for="(order, index) in orders.list" :key="index">
				<label class="height-16" />
				<navigator
					:url="`/pages/main/orderDetail?order_id=${order.order_id}`"
					:style="{ margin: `0 20rpx`, padding: `26rpx 20rpx` }"
					class="bgc-fff br-20"
				>
					<label>
						<text class="f1">
							<text class="color-333 fs-30 fw-700">{{ order.title }}</text>
							<text
								class="color-f21919 fs-28"
								v-if="order.status === 5 && order.chang_push_num < order.number"
							>
								(缺货)
							</text>
							<text class="color-f21919 ml-12 fs-36">×{{ order.number }}</text>
						</text>
						<text class="color-2e54fd fs-30 fw-700">查看详情</text>
					</label>

					<label class="mt-36 mb-36 fs-28 lh-2">
						<text class="color-999">产品规格：</text>
						<text class="color-666">{{ order.spec }}</text>
					</label>

					<label class="fs-28 color-333 fw-700">{{ order.desc }}</label>
				</navigator>
				<label class="height-16" />
			</block>

			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component
	export default class Search extends Vue {
		// component property
		orders: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";
		keywords: string = "";

		onLoad() {
			this.getData();
		}
		search() {
			this.orders.page = 1;
			this.orders.list = [];
			this.getData();
		}

		getData() {
			const { $request, orders } = this;
			if (requestFlag || !orders.page) return;
			(requestFlag = true), (this.loadStatus = "loading");
			$request
				.get("/orderList", {
					page: orders.page,
					size: orders.size,
					keywords: this.keywords,
				})
				.then(({ data }) => {
					orders.list.push(...data.list);
					orders.page = data.page;
					this.loadStatus = orders.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>